在 SwiftUI 中，動畫效果可以大大提升用戶的體驗，使界面變得更具動態感和交互性。SwiftUI 提供了多種方法來創建和控制動畫效果。這裡介紹幾個常見的動畫使用方式：

1. 簡單動畫

你可以使用 .animation() 修飾符來對視圖的屬性進行動畫處理，當其值變化時，動畫會自動觸發。

struct SimpleAnimationView: View {
    @State private var isExpanded = false

    var body: some View {
        VStack {
            Rectangle()
                .fill(Color.blue)
                .frame(width: isExpanded ? 200 : 100, height: 100)
                .animation(.default, value: isExpanded)

            Button("Animate") {
                isExpanded.toggle()
            }
        }
    }
}

在這個範例中，當按鈕被點擊時，矩形的寬度會在兩個值之間變化，並伴隨動畫效果。

2. Spring Animation（彈性動畫）

如果你想要更自然的動畫效果，可以使用彈性動畫，比如 .spring()。

struct SpringAnimationView: View {
    @State private var isExpanded = false

    var body: some View {
        VStack {
            Circle()
                .fill(Color.green)
                .frame(width: isExpanded ? 200 : 100, height: 100)
                .animation(.spring(response: 0.5, dampingFraction: 0.5), value: isExpanded)

            Button("Animate") {
                isExpanded.toggle()
            }
        }
    }
}

這裡 .spring() 提供了一個彈性的動態效果，當按鈕被點擊後，圓形的大小會逐漸變大或縮小，並帶有彈跳的效果。

3. 自定義動畫時間

可以使用 .easeIn、.easeOut 等選項來調整動畫的速度曲線，還可以設置自定義的動畫時間。

struct CustomDurationAnimationView: View {
    @State private var isExpanded = false

    var body: some View {
        VStack {
            RoundedRectangle(cornerRadius: 25)
                .fill(Color.purple)
                .frame(width: isExpanded ? 250 : 150, height: 150)
                .animation(.easeInOut(duration: 2), value: isExpanded)

            Button("Animate") {
                isExpanded.toggle()
            }
        }
    }
}

此例中，動畫會在 2 秒內緩慢展開或收縮，並且使用 .easeInOut 調整動畫的節奏，使其變得更加柔和。

4. 與狀態結合的動畫

動畫可以與狀態變化密切結合，當狀態值變化時，自動觸發動畫。

struct StateBasedAnimationView: View {
    @State private var scale: CGFloat = 1.0

    var body: some View {
        VStack {
            Image(systemName: "star.fill")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 100, height: 100)
                .scaleEffect(scale)
                .animation(.easeIn(duration: 0.5), value: scale)

            Button("Scale Up") {
                scale += 0.2
            }
        }
    }
}

當點擊按鈕後，星星圖案會根據狀態變化進行縮放，並伴隨著一個平滑的動畫效果。

5. 重複動畫

你可以使用 .repeatForever() 讓動畫無限重複，或 .repeatCount() 讓它重複特定次數。

struct RepeatingAnimationView: View {
    @State private var rotate = false

    var body: some View {
        Image(systemName: "arrow.right.circle.fill")
            .resizable()
            .frame(width: 100, height: 100)
            .rotationEffect(.degrees(rotate ? 360 : 0))
            .animation(
                Animation.linear(duration: 2)
                    .repeatForever(autoreverses: false),
                value: rotate
            )
            .onAppear {
                rotate = true
            }
    }
}

在這個範例中，圖像會不斷以 2 秒為週期進行旋轉。